<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webworld</title>

  <!-- 图标信息 -->
  <link rel="icon" href="./assets/images/our3.png" />
  <link rel="apple-touch-icon" href="./assets/images/our3.png" />
  <meta name="msapplication-TileImage" content="./assets/images/our3.png" />

  <!-- 引入bootstrap -->
  <link rel="stylesheet" href="./assets/css/bootstrap.min.css">

  <!-- 引入动画库 -->
  <link rel="stylesheet" href="./assets/css/animate.min.css">

  <!-- 引入重置样式文件 -->
  <link rel="stylesheet/less" href="./assets/css/reset.less">

  <!-- 引入公共样式common.less -->
  <link rel="stylesheet/less" href="./assets/css/common.less">

  <!-- 引入主页面样式home.less -->
  <link rel="stylesheet/less" href="./assets/css/home.less">
</head>

<body>
  <!-- 背景 -->
  <div class="header_bg">
    <div class="bg_img">
      <img id="img_bg" src="./assets/images/bg.png" alt="">
      <div class="bg"></div>
    </div>
  </div>

  <!-- header -->
  <div id="header" class="header">
    <div class="container">
      <div class="header_nav">
        <div class="title wow bounceIn">Webworld</div>
        <div class="nav_list">
          <a href="./index.html" target="_self" class="wow fadeInUp" data-wow-delay="50ms">Home</a>
          <a href="./portfolio.html" target="_self" class="wow fadeInUp" data-wow-delay="150ms">Portfolio</a>
          <a href="./contact.html" target="_self" class="wow fadeInUp" data-wow-delay="200ms">Contact</a>
        </div>
      </div>

      <div class="hcarousel wow fadeInUp">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"><span></span></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"><span></span></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"><span></span></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <div class="carousel-caption">
                <h1>Clean, flat & polished desgin</h1>
                <p>Proin facilisis aliquam nunc quis varius</p>
                <button>SHOW MORE</button>
              </div>
            </div>
            <div class="item">
              <div class="carousel-caption">
                <h1>Clean, flat & polished desgin</h1>
                <p>Proin facilisis aliquam nunc quis varius</p>
                <button>SHOW MORE</button>
              </div>
            </div>
            <div class="item">
              <div class="carousel-caption">
                <h1>Clean, flat & polished desgin</h1>
                <p>Proin facilisis aliquam nunc quis varius</p>
                <button>SHOW MORE</button>
              </div>
            </div>
          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-menu-left s_left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-menu-right s_right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- content -->
  <div class="content">
    <div class="container">

      <div class="info wow fadeInUp">
        rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since type specimen book !!
      </div>
      <ul class="info_list">
        <li class="wow fadeInUp" data-wow-delay="50ms">
          <div class="img">
            <img src="./assets/images/info1.png" alt="">
          </div>
          <div class="info_box">
            <h2>What We Are</h2>
            <p>Lorem Ipsum is simply dummy text the printing and typesetting.</p>
          </div>
          <div class="icon">
            <div class="glyphicon glyphicon-camera"></div>
          </div>
        </li>
        <li class="wow fadeInUp" data-wow-delay="150ms">
          <div class="img">
            <img src="./assets/images/info2.png" alt="">
          </div>
          <div class="info_box">
            <h2>Atart Our Project</h2>
            <p>Lorem Ipsum is simply dummy text the printing and typesetting.</p>
          </div>
          <div class="icon">
            <div class="glyphicon glyphicon-edit"></div>
          </div>
        </li>
        <li class="wow fadeInUp" data-wow-delay="250ms">
          <div class="img">
            <img src="./assets/images/info3.png" alt="">
          </div>
          <div class="info_box">
            <h2>Our Team</h2>
            <p>Lorem Ipsum is simply dummy text the printing and typesetting.</p>
          </div>
          <div class="icon">
            <div class="glyphicon glyphicon-shopping-cart"></div>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <!-- OUR FEATURES -->
  <div class="our">
    <div class="container">

      <!-- 统一标题 -->
      <div class="common_title wow fadeInUp">
        <div class="icon">
          <div></div>
        </div>
        <p>OUR <span>FEATURES</span></p>
      </div>

      <ul class="our_list">
        <li>
          <div class="img wow fadeInUp" data-wow-delay="50ms">
            <img src="./assets/images/our1.png" alt="">
            <img src="./assets/images/our2.png" alt="">
          </div>
          <div class="info wow fadeInUp" data-wow-delay="150ms">
            <h2>orem Ipsum is simply !!</h2>
            <p>
              There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
              in some form, by injected humour, or randomised words which don't look even slightly believable. If you
              are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in
              the middle of text. All the Lorem Ipsum generators.
            </p>
            <button class="btn">READ MORE</button>
          </div>
        </li>
        <li>
          <div class="info wow fadeInUp" data-wow-delay="50ms">
            <h2>A flat Camera</h2>
            <p>
              There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
              in some form, by injected humour, or randomised words which don't look even slightly believable. If you
              are going to use a passage of Lorem chunks as necessary, making this the first true generator on the
              Internet. It uses a dictionary of over 200 Latin words,
            </p>
            <button class="btn">READ MORE</button>
          </div>
          <div class="img wow fadeInUp" data-wow-delay="150ms">
            <img src="./assets/images/our3.png" alt="">
            <img src="./assets/images/our4.png" alt="">
          </div>
        </li>
      </ul>
    </div>
  </div>

  <!-- OUR LATEST PROJECTS -->
  <div class="latest">
    <div class="container">
      <!-- 统一标题 -->
      <div class="common_title wow fadeInUp">
        <div class="icon glyphicon glyphicon-tower"></div>
        <p>OUR LATEST <span>PROJECTS</span></p>
        <h6>Lorem Ipsum is simply dummy text the printing and typesetting.</h6>
      </div>

      <ul class="latest_list">
        <li class="wow fadeInUp" data-wow-delay="50ms">
          <div class="img">
            <img src="./assets/images/latest1.jpeg" alt="">
            <div class="glyphicon glyphicon-search"></div>
          </div>
          <div class="info">
            <h4>Lorem lpsum</h4>
            <p>Photography</p>
          </div>
        </li>
        <li class="wow fadeInUp" data-wow-delay="150ms">
          <div class="img">
            <img src="./assets/images/latest2.png" alt="">
            <div class="glyphicon glyphicon-search"></div>
          </div>
          <div class="info">
            <h4>Bonorum et Malorum</h4>
            <p>Print Designing</p>
          </div>
        </li>
        <li class="wow fadeInUp" data-wow-delay="250ms">
          <div class="img">
            <img src="./assets/images/latest3.png" alt="">
            <div class="glyphicon glyphicon-search"></div>
          </div>
          <div class="info">
            <h4>Injected humour</h4>
            <p>E-marketing</p>
          </div>
        </li>
        <li class="wow fadeInUp" data-wow-delay="350ms">
          <div class="img">
            <img src="./assets/images/latest4.png" alt="">
            <div class="glyphicon glyphicon-search"></div>
          </div>
          <div class="info">
            <h4>Embarrassing</h4>
            <p>Best Marketplace</p>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <!-- CLIENT TESTIMONIALS -->
  <div class="client">
    <div class="container">
      <!-- 统一标题 -->
      <div class="common_title wow fadeInUp">
        <div class="icon glyphicon glyphicon-comment"></div>
        <p>CLIENT <span>TESTIMONIALS</span></p>
      </div>

      <div class="client_content wow fadeInUp">
        <div id="carousel-example-generica" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generica" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generica" data-slide-to="1"></li>
            <li data-target="#carousel-example-generica" data-slide-to="2"></li>
            <li data-target="#carousel-example-generica" data-slide-to="3"></li>
            <li data-target="#carousel-example-generica" data-slide-to="4"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <div class="carousel-caption">
                <h6>
                  orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                  industry's standard dummy text ever since type specimen book !!
                </h6>
                <div>
                  <div></div>
                  <div></div>
                </div>
                <p><span>Robart Markel</span>,Company Name</p>
              </div>
            </div>
            <div class="item">
              <div class="carousel-caption">
                <h6>
                  orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                  industry's standard dummy text ever since type specimen book !!
                </h6>
                <div></div>
                <p><span>Robart Markel</span>,Company Name</p>
              </div>
            </div>
            <div class="item">
              <div class="carousel-caption">
                <h6>
                  orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                  industry's standard dummy text ever since type specimen book !!
                </h6>
                <div></div>
                <p><span>Robart Markel</span>,Company Name</p>
              </div>
            </div>
            <div class="item">
              <div class="carousel-caption">
                <h6>
                  orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                  industry's standard dummy text ever since type specimen book !!
                </h6>
                <div></div>
                <p><span>Robart Markel</span>,Company Name</p>
              </div>
            </div>
            <div class="item">
              <div class="carousel-caption">
                <h6>
                  orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                  industry's standard dummy text ever since type specimen book !!
                </h6>
                <div></div>
                <p><span>Robart Markel</span>,Company Name</p>
              </div>
            </div>
          </div>
        </div>
      </div>


    </div>
  </div>

  <!-- footer -->
  <div class="footer">

    <div class="footer_start">
      <div class="container">
        <ul>
          <li class="wow fadeInUp" data-wow-delay="50ms">
            <h1>Webworld</h1>
            <p>
              There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
              in some form, by injected humour, or randomised words which don't look even slightly believable. If you
              are going to use a passage of Lorem Ipsum, you need to be sure there
            </p>
          </li>
          <li class="wow fadeInUp" data-wow-delay="150ms">
            <h1>CONTACT</h1>
            <p>
              There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
              in
            </p>
            <div><span class="glyphicon glyphicon-map-marker"></span>New Dellhi</div>
            <div><span class="glyphicon glyphicon-envelope"></span>info@yourwebsite.com</div>
            <div><span class="glyphicon glyphicon-earphone"></span>890-09880-45590</div>
          </li>
          <li class="wow fadeInUp" data-wow-delay="250ms">
            <h1>LATEST TWEETS</h1>
            <div class="lastest">
              <div class="icon"></div>
              <div class="info">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                </p>
                <p>1 Hour Ago</p>
              </div>
            </div>
            <div class="lastest">
              <div class="icon"></div>
              <div class="info">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>
                <p>1 Hour Ago</p>
              </div>
            </div>
          </li>
          <li class="wow fadeInUp" data-wow-delay="350ms">
            <h1>NEWS LETTER</h1>
            <p>Type your email address below and recive our daily news letter for free</p>
            <div>
              <input type="text" placeholder="Email Address">
              <button>GO</button>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="footer_end">
      <div class="container">
        <div class="info wow fadeInUp">&copy; 2013 All right reserved. Theme by cssauthor.com
        </div>
        <div class="icon wow fadeInUp">
          <a href="javascript:void(0);" class="wow fadeInUp" data-wow-delay="50ms"></a>
          <a href="javascript:void(0);" class="wow fadeInUp" data-wow-delay="150ms"></a>
          <a href="javascript:void(0);" class="wow fadeInUp" data-wow-delay="250ms"></a>
        </div>
      </div>
    </div>

  </div>

  <!-- 回到顶部 -->
  <div id="back">
    <a href="#header" id="gotop">
      <img src="./assets/images/top.svg" alt="">
    </a>
  </div>

  <!-- 引入jquery -->
  <script src="./assets/js/jQuery.min.js"></script>

  <!-- 引入bootstrap.js -->
  <script src="./assets/js/bootstrap.min.js"></script>

  <!-- 引入less解析js -->
  <script src="./assets/js/less.min.js"></script>

  <!-- 引入懒加载js -->
  <script src="./assets/js/wow.min.repeat.js"></script>

  <script>
    window.onload = function () {

      new WOW().init();

      var backbtn = document.querySelector("#back");

      // 添加动画
      $("#back a").on("click", function () {
        $(this).parent().addClass("back");

        setTimeout(() => {
          $(this).parent().removeClass("back")
        }, 1000)
      })

      // 锚点的缓动效果 给特定链接元素 绑定点击事件
      $("#back a,.menu a").on("click", function () {
        // 获取链接地址上面的路径部分(不包括域名)
        //系统替换后的结果
        var LocationReplace = location.pathname.replace(/^\//, '')
        var CurrentReplace = this.pathname.replace(/^\//, '')

        //系统获取的域名部分
        var LocationHostname = location.hostname
        var CurrentHostname = this.hostname


        //你必须是跳转到当前界面的链接  才能做锚点
        if (LocationReplace == CurrentReplace && LocationHostname == CurrentHostname) {
          //获取将要跳转的锚点位置
          var $target = $(this.hash)

          //一定要当他找到锚点元素的时候，才跳转锚点
          if ($target.length > 0) {
            //获取目标元素的位置
            var pos = $target.offset().top

            //让页面的body和html 滚动到 pos这个位置
            $("html,body").animate({
              //指的就是滚动条的距离
              scrollTop: pos
            }, 1000)

            $(this).parent().remove("back")
          }

          //阻止刷新界面
          return false

        }

      })


      $(document).scroll(function () {

        //获取到滚动条到顶上的位置
        var distance = $(this).scrollTop();
        // console.log(distance);

        if (distance >= 200) {
          $("#back").show();
        } else {
          $("#back").hide();
        }
      })

      console.log($(".header").height());


      /* 修改返回顶部盒子位置 */
      var containerWidth = document.querySelector(".container").offsetWidth;

      function reviseBack() {
        if (containerWidth == 1170) {
          backbtn.style.marginLeft = "470px"
          backbtn.style.left = "50%"
        }
        if (containerWidth == 970) {
          backbtn.style.marginLeft = "385px"
          backbtn.style.left = "50%"

        }
        if (containerWidth == 750) {
          backbtn.style.marginLeft = "275px"
          backbtn.style.left = "50%"

        }
        if (containerWidth < 750) {
          backbtn.style.left = "unset"
          backbtn.style.marginLeft = "0px"
          backbtn.style.right = "20px"
        }
      }

      reviseBack();

      var doc = document,
        ele = doc.documentElement,
        bodys = doc.bodys,
        clientWidth = ele ? ele.clientWidth : bodys.clientWidth,
        clientHeight = ele ? ele.clientHeight : bodys.clientHeight;

      window.onresize = function (e) {
        //浏览器改变的时候会触发这个事件
        containerWidth = document.querySelector(".container").offsetWidth
        console.log(containerWidth);
        //获取当前浏览器宽度
        var cw = ele ? ele.clientWidth : bodys.clientWidth;

        if (cw !== clientWidth) {
          reviseBack();
        }
      }

      // $(".bg").height($("#img_bg").height());

      // var doc = document,
      //   ele = doc.documentElement,
      //   bodys = doc.bodys,
      //   clientWidth = ele ? ele.clientWidth : bodys.clientWidth,
      //   clientHeight = ele ? ele.clientHeight : bodys.clientHeight;

      // window.onresize = function (e) {
      //   //浏览器改变的时候会触发这个事件

      //   //获取当前浏览器宽度
      //   var cw = ele ? ele.clientWidth : bodys.clientWidth;

      //   if (cw !== clientWidth) {
      //     $(".bg").height($("#img_bg").height())
      //   }
      // }
    }
  </script>
</body>

</html>